<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>表格排序</title>
	<script type="text/javascript">
        window.onload = function(){
        	var oTab = document.getElementById('tab1');
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function(){
                //声明一个数组arr存所有的tr
                var arr = [];
                for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                    arr[i] = oTab.tBodies[0].rows[i]; //oTab.tBodies[0].rows[i];是一个tr
                };

                //给数组排序
                arr.sort(function(tr1,tr2){
                    //比较的id实际上上tr里的第0个单元格里面的内容
                    var n1 = parseInt(tr1.cells[0].innerHTML);
                    var n2 = parseInt(tr2.cells[0].innerHTML);

                    return n1-n2;
                });

                //把已经排好序的数组tr重新插入一遍
                for(var i=0;i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);
                };
            };
        };
	</script>
</head>
<body>
   
   
    <input id="btn1" type="button" value="排序" />
    <table id="tab1" border="1" width="500px">
    	<thead>
    		<tr>
    			<td>ID</td>
    			<td>姓名</td>
    			<td>年龄</td>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>25</td>
    			<td>Blue</td>
    			<td>27</td>
    		</tr>
    		<tr>
    			<td>55</td>
    			<td>小潘</td>
    			<td>27</td>
    		</tr>
    		<tr>
    			<td>32</td>
    			<td>邓狗</td>
    			<td>22</td>
    		</tr>
    		<tr>
    			<td>11</td>
    			<td>张三</td>
    			<td>23</td>
    		</tr>
    		<tr>
    			<td>87</td>
    			<td>李四</td>
    			<td>25</td>
    		</tr>
    		<tr>
    			<td>6</td>
    			<td>王五</td>
    			<td>21</td>
    		</tr>
            <tr>
                <td>54</td>
                <td>小张</td>
                <td>21</td>
            </tr>
            <tr>
                <td>18</td>
                <td>李子</td>
                <td>21</td>
            </tr>
    	</tbody>
    </table>
	
</body>
</html>